<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            background-color: #eee;
        }

        .cart {
            width: 1100px;
            margin: auto;
            background-color: #fff;
            text-align: center;
            line-height: 50px;
        }

        .cart-hd {
            display: flex;
        }

        .cart-hd p {
            flex: 1;
            height: 50px;
            border-bottom: 1px solid #000;
        }

        .cart-bd li {
            display: flex;
        }

        .cart-bd p {
            flex: 1;
            height: 50px;
            border-bottom: 1px solid #000;
        }

        .cart-bd p:nth-child(2),
        .cart-hd p:nth-child(2) {
            flex: 2;
            padding: 0 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .cart-bd img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }

        .num {
            width: 50px;
            vertical-align: middle;
        }

        .add,
        .reduce {
            width: 20px;
            height: 20px;
            text-align: center;
            display: inline-block;
            background-color: orange;
            line-height: 20px;
            vertical-align: middle;
        }

        .off {
            background-color: #ddd;
        }

        .empty {
            display: none;
        }
    </style>
</head>

<body>

    <div class="cart">
        <div class="cart-hd">
            <p>
                <input type="checkbox" class="checkAll">全选
            </p>
            <p>商品名称</p>
            <p>图</p>
            <p>单价</p>
            <p>数量</p>
            <p>小计</p>
            <p>操作</p>
        </div>
        <div class="cart-bd">
            <ul>
                <!-- <li>
                    <p>
                        <input type="checkbox" class="checkOne">
                    </p>
                    <p>什么耳机什么耳机什么耳机什么耳机什么耳机什么耳机</p>
                    <p>
                        <img src="" alt="">
                    </p>
                    <p>199</p>
                    <p>
                        <span class="reduce">-</span>
                        <input type="text" class="num">
                        <span class="add">+</span>
                    </p>
                    <p>6</p>
                    <p>X</p>
                </li> -->
            </ul>
        </div>
        <div class="cart-ft">
            <p class="delAll" onclick="delAll()">批量删除</p>
            <p>数量小计：<strong class="total">0</strong></p>
            <p>价格小计: <strong class="money">0</strong></p>
        </div>
    </div>


    <h1 class="empty">购物车空空如也，<a href="../html/05_商品列表.html">请继续挑选</a></h1>

    <script src="../js/ajax.js"></script>

    <script>

        // 谁的购物车
        //    判断是否登录
        let oOnes ;
        const oCart = document.querySelector('.cart');
        const oEmpty = document.querySelector('.empty');

        

        const username = localStorage.getItem('USER_LOGIN');
        if(!username) {
            alert('还没有登录');
            // 跳转到登录
        } else {
            ajax({
                type : 'get' ,
                path : 'http://43.138.81.225/php/showCart.php' ,
                data : {
                    username
                } ,
                success : res => {
                    console.log(res) ;
                    if(res.status) {
                        render(res.data) ;
                    } else {
                        // 没有数据
                        oCart.style.display = 'none';
                        oEmpty.style.display = 'block'
                    }
                }
            })
        }



        function render(data) {
             // 接收到的是对象   要的是对象中的list

            var oUL = document.querySelector('ul');
            var res = '';

            // 拼接
            data.forEach(function (v) {
                res += `
                    <li>
                        <p>
                            <input type="checkbox" class="checkOne" suiBian="${v.cart_id}">
                        </p>
                        <p>${v.goods_title}</p>
                        <p><img src="${v.goods_img}"></p>
                        <p>${v.goods_price}</p>
                        <p>
                            <span class="reduce ${v.num>1?'':'off'}" onclick="reduce('${v.goods_id}' , this)">-</span>
                            <input type="text" class="num" value="${v.num}">
                            <span class="add" onclick="add('${v.goods_id}' , this)">+</span>
                        </p>
                        <p>${v.num * v.goods_price}</p>
                        <p onclick="del( '${v.cart_id}' , this)">X</p>
                    </li>
                `
            })


            oUL.innerHTML = res;

            oOnes = document.querySelectorAll('.checkOne');
        }




        // 数量加
        function add(id , _this) {
            // 请求  加入购物车
            ajax({
                path : 'http://43.138.81.225/php/addToCart.php' ,
                type : 'post' ,
                data : {
                    id ,
                    username ,
                    num : 1
                } ,
                success : res => {
                    console.log(res);
                   if(res.status) {
                        // 加入成功   修改页面的数量
                        _this.previousElementSibling.value++ ;
                        // 小计

                        // 给旁边的减法点亮
                        if(_this.previousElementSibling.previousElementSibling.classList.contains('off')) {
                            _this.previousElementSibling.previousElementSibling.classList.remove('off');
                        }
                   }
                }
            })

        }


        // 数量减   加入购物车，数量是-1
        function reduce(id , _this) {
            // 判断能不能减
            if(_this.classList.contains('off')) {
                return alert('数量不能小于1')
            }
            // 请求  加入购物车
            ajax({
                path : 'http://43.138.81.225/php/addToCart.php' ,
                type : 'post' ,
                data : {
                    id ,
                    username ,
                    num : -1
                } ,
                success : res => {
                    console.log(res);
                   if(res.status) {
                        // 加入成功   修改页面的数量
                        _this.nextElementSibling.value-- ;
                        if(_this.nextElementSibling.value == 1) {
                            _this.classList.add('off');
                        }
                   }
                }
            })
        }



        // 删除 --- 
        //     1 删除谁的什么商品（username , goods_id)   
        //     2 通过cart_id 来删除
        //    在购物车那个表里面 ， 用户可以买同一个商品(商品id没有了唯一性)  --- cart_id是唯一的
        function del(id , _this) {
            ajax({
                type : 'post' ,
                path : 'http://43.138.81.225/php/delete.php' ,
                data : {id} ,
                success : res => {
                    console.log(res);
                    if(res.status) {
                        // 删除节点
                        _this.parentElement.remove();
                        // alert('删除成功') ;
                         // 没有数据
                        // 判断还有么有商品
                        oOnes = document.querySelectorAll('.checkOne') ;
                        if(!oOnes.length) {
                            oCart.style.display = 'none';
                            oEmpty.style.display = 'block'
                        }
                    } else {
                        alert('服务器错误，请重试')
                    }
                }
            })
        }



        // 批量删除
        //    判断是否选中
        //    选中以后 id拿不到  ---  在渲染的时候，就在checkbox 上面绑定自定义属性  值为cart_id

        //    bug
        //      网速不是特别好的时候，批量删除   DOM逐个删除的情况 --- 对用户不太友好
        //      解决：不等到请求结果，先直接删除
        //           有可能商品并没有删除成功(服务器错误 --- 警告提示一下，然后刷新页面)
        function delAll() {
            console.log(oOnes);
            // 判断是否选中
            oOnes.forEach(item => {
                console.log(item.checked);
                if(item.checked) {
                    // 删除
                    // 获取id
                    const id = item.getAttribute('suiBian');
                    console.log(id) ;
                    item.parentElement.parentElement.remove();
                    ajax({
                        type : 'post' ,
                        path : 'http://43.138.81.225/php/delete.php' ,
                        data : {id} ,
                        success : res => {
                            console.log(res);
                            if(res.status) {
                                // item.parentElement.parentElement.remove();
                                // 判断长度还有没有 
                                oOnes = document.querySelectorAll('.checkOne') ;
                                if(!oOnes.length) {
                                    oCart.style.display = 'none';
                                    oEmpty.style.display = 'block'
                                }
                            } else {
                                alert('服务器错误，请重试');
                                location.reload();
                            }
                        }
                    })
                }
            })
        }
        

    </script>
    
</body>
</html>